<template>
	<view>
		<u-popup v-model="showModal" mode="center" :mask-close-able="maskCloseAble" :mask-custom-style="maskStyle" :border-radius="borderRadius" :length="width" @close="close">
			<view class="popupWrapper">
				<view class="popupTitle substring" v-if="showTitle" >{{title}}</view>
				<view class="popupContent">
					<slot></slot>
				</view>
				<view :class="{'popupFooter':true,'u-border-top':isBorder}" v-if="showCancelButton || showConfirmButton">
					<slot v-if="$slots['cancel-button']" name="cancel-button"></slot>
					<view v-else-if="showCancelButton" class="popupFooterBtn" :style="[cancelBtnStyle]" @click="handleCancel">
						{{cancelText}}
					</view>
					<slot v-if="$slots['confirm-button']" name="confirm-button"></slot>
					<view v-else-if="showConfirmButton"  class="popupFooterBtn" :style="[confirmBtnStyle]" @click="handleConfirm">
						{{confirmText}}
					</view> 
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	/**
	 * width 宽度
	 * showConfirmButton 是否显示确认按钮
	 * showCancelButton 是否显示取消按钮
	 * confirmText 确认文案
	 * cancelText 取消文案
	 * confirmColor 确认按钮颜色
	 * cancelColor 取消文字颜色
	 * borderRadius 圆角值
	 * showTitle 是否显示标题
	 * title 标题
	 * maskCloseAble 
	 * */
	export default {
		name: "Popup",
		props: {
			width:{
				type: [Number, String],
				default: 600
			},
			maskCloseAble:{
				type: Boolean,
				default: true
			},
			// 是否显示确认按钮
			showConfirmButton: {
				type: Boolean,
				default: true
			},
			// 是否显示取消按钮
			showCancelButton: {
				type: Boolean,
				default: false
			},
			// 确认文案
			confirmText: {
				type: String,
				default: '确认'
			},
			// 取消文案
			cancelText: {
				type: String,
				default: '取消'
			},
			// 确认按钮颜色
			confirmColor: {
				type: String,
				default: '#2979ff'
			},
			// 取消文字颜色
			cancelColor: {
				type: String,
				default: '#606266'
			},
			// 圆角值
			borderRadius: {
				type: [Number, String],
				default: 16
			},
			// 是否显示标题
			showTitle: {
				type: Boolean,
				default: true
			},
			title:{
				type: [String],
				default: '提示'
			},
			// 是否展示边框
			isBorder:{
				type: Boolean,
				default: true
			}
		},
		computed: {
			cancelBtnStyle() {
				return Object.assign({
					color: this.cancelColor
				}, this.cancelStyle);
			},
			confirmBtnStyle() {
				return Object.assign({
					color: this.confirmColor
				}, this.confirmStyle);
			}
		},
		data() {
			return {
				showModal:false,
				maskStyle: {
					background: 'rgba(38, 38, 38,.1)',
					backdropFilter: 'blur(5px)'
				},
			};
		},
		watch: {
		},
		created() {
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					this.$set(this.maskStyle, 'background', 'rgba(38, 38, 38,.1)')
					break;
				case 'ios':
					this.$set(this.maskStyle, 'background', 'rgba(68, 68,68,0.65)')
					break;
				default:
					break;
			}
		},
		methods: {
			open() {
				this.showModal = true
			},
			close() {
				this.showModal = false
			},
			handleConfirm(){
				this.showModal = false
				this.$emit('confirm')
			},
			handleCancel(){
				this.showModal = false
				this.$emit('cancel')
			}
		}
	}
</script>

<style lang="scss">	
.popupWrapper{
	height: auto;
	overflow: hidden;
	font-size: 32rpx;
	background-color: #fff;
	.popupTitle{
		font-size: 34rpx;
		padding-top: 38rpx;
		font-weight: 500;
		text-align: center;
		width: 540rpx;
		margin: 0 auto;
	}
	.popupContent{ 
		// padding: 48rpx;
		font-size: 30rpx;
		text-align: center;
	}
	.popupFooter{
		display: flex;
		.popupFooterBtn{
			flex: 1;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 32rpx;
			box-sizing: border-box;
			cursor: pointer;
			text-align: center;
			border-radius: 4rpx;
			background: #fff;
			&:hover{
				background: #fff;
			}
		}
	}
}
</style>
